<template>
	<view class="contact-card">

		<uni-swipe-action>
			<uni-swipe-action-item :show="item.show" @change="swipeActionChange()" @click="bindClick"
				v-for="(item, index) in list" :key="item.id">
				<!-- <template v-slot:left>
		 			<view class="slot-button">
		 				<text
		 				    class="slot-button-text"
		 				    @click="bindClick({position:'left',content:{text:'置顶'}})"
		 				>置顶</text>
		 			</view>
		 		</template> -->

				<view class="contact-card_list"
					:style="{margin: item.show == 'right' ? '20rpx 0 20rpx 20rpx' : '20rpx'}" @click="clickCard(item)">
					<view class="contact-card_info">
						<view class="contact-card_title">
							<view>{{item.groupName}}</view>
							<view class="contact-card_right">班组长：{{item.groupPrincipal}}
							
								<view class="contact-card_edit" style="width: 50rpx;" @click="editBtn(item)">
									<uni-icons type="compose" size="20" color="#007aff" />
								</view>
							</view>
						</view>

						<view>进场时间：{{item.enterTime}}</view>
						<view>出场时间：{{item.outTime}}
						</view>
					</view>


				</view>
				<template v-slot:right>
					<!-- <view class="edit-button" @click="editBtn(item)"><text class="slot-button-text">编辑</text></view> -->
					<view class="slot-button" @click="delBtn(item)"><text class="slot-button-text">删除</text></view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <view class="contact-card_list" v-for="(item, index) in list" :key="item.id" @click="clickCard(item)">
				<view class="contact-card_info">
					<view>姓名：{{item.name}}</view>
					<view>姓名：{{item.phone}}</view>
					<view v-if="isRemarks || isRemarks=='true'" class="contact-card_info-remarks">备注：{{item.remarks}}
					</view>
				</view>
				 
			</view> -->
	</view>
</template>
<script>
	/**
	 * @property {Boolean} isAdd=[true|false] 是否是新增，默认否(默认是列表)
	 * @property {Array} list 联系人列表
	 * @property {Boolean} isRemarks=[true|false] 是否显示备注，默认是
	 * @property {Boolean} isEdit=[true|false] 是否可编辑，默认是
	 * @property {Boolean} isHead=[true|false] 是否可编辑，默认是
	 */
	export default {
		name: 'ContactCard',
		props: {
			isAdd: {
				type: [Boolean, String],
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			isRemarks: {
				type: [Boolean, String],
				default: true
			},
			isEdit: {
				type: [Boolean, String],
				default: true
			},
			isHead: {
				type: [Boolean, String],
				default: true
			}
		},
		data() {
			return {
				editIcon: '',
			}
		},
		methods: {
			swipeActionChange: function(res) {
				this.list.forEach((item, index) => {
					item.show = "none";
				})
				// res.show = "right";
			},
			modalTap: function(e) {
				uni.showModal({
					title: "弹窗标题",
					content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
					showCancel: false,
					confirmText: "确定"
				})
			},
			noTitlemodalTap: function(e) {
				uni.showModal({
					content: "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内",
					confirmText: "确定",
					cancelText: "取消"
				})
			},
			addContact() {
				this.$emit('addContact');
			},
			clickCard(e) {
				if (JSON.parse(this.isEdit)) {
					this.$emit('clickCard', e);
				}
			},
			delBtn(e) {
				uni.showModal({
					content: "您确定删除该班组？",
					confirmText: "继续",
					cancelText: "取消",
					success: function(res) {
						if(res.confirm) {
							uni.showModal({
								title: "删除成功",
								showCancel: false,
								confirmText: "确定"
							})
						}
					}
				})


			},
			editBtn(e) {
				//../addManage/addManage
				uni.navigateTo({
					url: '/pages/addManage/addManage',
					animationType: 'fade-in'
				});
				if (JSON.parse(this.isEdit)) {
					this.$emit('clickCard', e);
				}
			}
		}
	}
</script>
<style lang="scss">
	.edit-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #5b98de;
		padding: 14px;
		margin: 11px 0;
	}

	.edit-button-text {
		color: #ffffff;
		font-size: 14px;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 134px;
		line-height: 34px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #ff5a5f;
		padding: 14px;
		margin: 11px 0;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}

	.contact-card_info {}

	.contact-card {
		background-color: #F7F8FA;
	}

	.contact-card_list {
		position: relative;
		padding: 30rpx;
		background-color: #FFF;
		// box-shadow: 2rpx 12rpx 8rpx 0rpx rgba(10, 10, 55, .3);
		border: 1rpx solid #ccc;

		.contact-card_info {

			.contact-card_info-remarks {
				color: #909399;
				font-size: 80%;
			}

			.contact-card_title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 30upx;
				font-size: 30upx;
				.contact-card_right {
					display: flex;
					flex-direction: row;
				}
				.contact-card_edit {
					width: 40rpx;
					height: 40rpx;
					image {
						width: 100%;
					}
					margin-left: 10rpx;
				}
			}
		}



		.contact-card_list-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.contact-card_add-icon {
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}

	// .contact-card_list::before {
	// 	position: absolute;
	// 	right: 0;
	// 	bottom: 0;
	// 	left: 0;
	// 	height: 2px;
	// 	background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
	// 	background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
	// 	background-size: 80px;
	// 	content: '';
	// }

	.card-icon {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
	}

	.card-icon-right {
		background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-you%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M731.7%20475.1L370.6%2080.8c-19.7-21.5-53-22.9-74.4-3.3-21.5%2019.7-22.9%2053-3.3%2074.4l328.6%20358.8-328.3%20359.8c-19.6%2021.5-18.1%2054.8%203.4%2074.4%2021.5%2019.6%2054.8%2018.1%2074.4-3.4l360.5-394.9c0.7-0.8%201.5-1.7%202.1-2.5%2016.4-19.9%2016.1-49.4-1.9-69z%22%20fill%3D%22%23999999%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
	}

	.card-icon-contact {
		background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-lianxiren%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M994.304%20949.76c-15.872-197.12-187.392-227.84-260.608-241.152-6.144-1.024-11.264-2.048-15.872-3.072-31.232-6.656-54.272-19.456-65.024-36.352-7.168-11.264-8.704-23.552-5.632-37.888%2010.24-43.008%2041.472-73.216%2071.168-102.4%2024.064-23.552%2047.104-46.08%2057.856-74.24%2018.432-48.128%2017.92-74.752-3.072-94.72-6.144-6.144-9.216-14.848-7.168-23.04%2018.432-78.336%207.68-143.36-32.256-194.048C655.36%2044.544%20493.568%2036.864%20445.952%2036.864c-41.984%200-81.408%204.608-108.544%2013.312-9.216%203.072-16.384%209.216-20.48%2017.408-4.096%208.192-5.12%2017.92-2.048%2026.624v0.512c3.584%209.728%200%2020.992-8.704%2027.136-57.344%2043.008-72.192%20111.104-48.128%20215.04%202.048%208.704-0.512%2017.408-7.168%2023.552-20.48%2019.968-21.504%2046.592-2.56%2094.72%2010.752%2028.16%2033.792%2050.176%2057.856%2074.24%2029.696%2029.184%2060.416%2059.392%2071.168%20102.4%203.584%2013.824%201.536%2026.624-5.632%2037.888-10.752%2016.896-33.792%2029.696-65.024%2036.352-4.608%201.024-9.728%202.048-15.872%203.072-73.728%2012.8-245.248%2043.52-261.12%20240.64-1.024%209.728%202.56%2019.456%209.216%2026.624%206.656%207.168%2015.872%2011.264%2025.6%2011.264h895.488c9.728%200%2018.944-4.096%2025.6-11.264%206.144-7.168%209.728-16.896%208.704-26.624zM81.92%20936.96c8.704-59.904%2036.352-103.936%2083.968-134.144%2045.568-28.672%20100.864-38.4%20134.144-44.544%206.144-1.024%2011.776-2.048%2016.384-3.072%2045.568-9.216%2079.36-29.696%2097.792-58.88%2014.336-22.528%2018.432-49.152%2011.776-76.8-13.824-56.832-51.712-94.208-84.48-126.464-19.968-19.968-39.424-38.4-46.08-56.32-8.704-23.04-10.24-33.28-9.728-37.888v-1.536c0-0.512%200.512-0.512%201.024-1.024%2019.456-18.944%2027.136-45.568%2020.992-71.68-25.088-106.496%202.56-142.848%2029.184-163.328%2021.504-15.872%2032.256-41.472%2029.696-67.584%2021.504-4.608%2050.176-7.168%2079.872-7.168%2086.528%200%20197.12%2023.04%20248.32%2087.552%2029.696%2037.888%2037.376%2088.576%2022.528%20151.04-6.144%2025.6%202.048%2052.736%2020.992%2071.168%200.512%200.512%200.512%200.512%201.024%200.512v1.536c0%204.096-1.024%2014.848-9.728%2037.888-6.656%2017.92-26.112%2036.352-46.08%2056.32-33.28%2032.768-70.656%2069.632-84.48%20126.464-6.656%2027.648-2.56%2053.76%2011.776%2076.8%2018.432%2029.184%2052.224%2049.152%2097.792%2058.88%205.12%201.024%2010.24%202.048%2016.896%203.072%2032.768%206.144%2087.552%2015.872%20133.632%2044.544%2048.128%2030.208%2075.264%2073.728%2083.968%20134.144H81.92z%22%20fill%3D%22%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
	}

	.card-icon-add {
		background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-xinzeng%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512%2042.666667c259.157333%200%20469.333333%20210.133333%20469.333333%20469.333333s-210.176%20469.333333-469.333333%20469.333333S42.666667%20771.2%2042.666667%20512%20252.842667%2042.666667%20512%2042.666667z%20m4.266667%20234.666666h-8.533334a42.666667%2042.666667%200%200%200-42.666666%2042.666667l-0.042667%20145.066667H320a42.666667%2042.666667%200%200%200-42.666667%2042.666666v8.533334a42.666667%2042.666667%200%200%200%2042.666667%2042.666666h145.024l0.042667%20145.066667a42.666667%2042.666667%200%200%200%2042.666666%2042.666667h8.533334a42.666667%2042.666667%200%200%200%2042.666666-42.666667l-0.042666-145.066667H704a42.666667%2042.666667%200%200%200%2042.666667-42.666666v-8.533334a42.666667%2042.666667%200%200%200-42.666667-42.666666h-145.109333l0.042666-145.066667a42.666667%2042.666667%200%200%200-42.666666-42.666667z%22%20fill%3D%22%231989FA%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
	}
</style>
